import React from 'react'
import { Card, Icon, Tabs, message } from 'antd';
import './ui.less'

const TabPane = Tabs.TabPane;


class Tabss extends React.Component {

    // 一定要定义！！！！
    newTabIndex=0

    handleMessage =(key) => {
        message.info('恭喜你，React课程晋级成功' + key);
    }

    componentWillMount() {
        const panes = [
            { title: 'Tab 1', content: 'Content of Tab 1', key: '1' },
            { title: 'Tab 2', content: 'Content of Tab 2', key: '2' },
            { title: 'Tab 3', content: 'Content of Tab 3', key: '3' }
          ];
        
          this.setState({
            activeKey: panes[0].key,
            panes
          })
    }

    onEdit = (targetKey, action) => {
        this[action](targetKey);
      }
    add = () => {
        const panes = this.state.panes;
        const activeKey = `newTab${this.newTabIndex++}`;
        panes.push({ title: 'New Tab', content: 'New Tab Pane', key: activeKey });
        this.setState({ panes, activeKey });
    }    
    remove = (targetKey) => {
        //找出选中当前删除的也是当前的页签
        let activeKey = this.state.activeKey;
        let lastIndex;
        this.state.panes.forEach((pane, i) => {
          if (pane.key === targetKey) {
            lastIndex = i - 1;
          }
        });

        //过滤出要删除的对象
        const panes = this.state.panes.filter(pane => pane.key !== targetKey);
        if (lastIndex >= 0 && activeKey === targetKey) {
          activeKey = panes[lastIndex].key;
        }
        this.setState({ panes, activeKey });
      } 



    // 切换面板的回调 自带的方法 activeKey
    onChange =(activeKey) => {
        this.setState({
            activeKey
        })
    }

    render() {
        return (
            <div>
                <Card title="Tab页签" className="warp">
                {/* 这里是在Tabs 上绑定事件，一定是onChange事件，而不是onClick/ */}
                    <Tabs defaultActiveKey="1" onChange={this.handleMessage}>
                        <TabPane tab="Tab 1" key="1">欢迎学习React课程</TabPane>
                        <TabPane tab="Tab 2" disabled key="2">Tab 2</TabPane>
                        <TabPane tab="Tab 3" key="3">React是一门非常受欢迎的MV*框架</TabPane>
                    </Tabs>
                </Card>
                <Card title="Tab带图标页签" className="warp">
                <Tabs defaultActiveKey="2" onChange={this.handleMessage}>
                        {/* tab要写多个元素，必须要有根元素 */}
                        <TabPane tab={<span><Icon type="plus" />Tab 1</span>} key="1">欢迎学习React课程</TabPane>
                        <TabPane tab={<span><Icon type="edit" />Tab 2</span>} disabled key="2">Tab 2</TabPane>
                        <TabPane tab={<span><Icon type="delete" />Tab 3</span>} key="3">React是一门非常受欢迎的MV*框架</TabPane>
                </Tabs>
                </Card>
                <Card title="Tab可关闭卡片式页签" className="warp">
                <Tabs defaultActiveKey="2"
                      type="editable-card"
                      onChange={this.onChange}
                        //   activeKey 可以省略，内嵌已经自带了
                      activeKey={this.state.activeKey}
                      onEdit={this.onEdit}
                      >
                        {
                            this.state.panes.map((item) => {
                                return <TabPane 
                                tab={item.title}
                                key={item.key}
                                // closable={item.closable}
                                >
                                {item.content}
                                </TabPane>
                            })
                        }
                </Tabs>
                </Card>
            </div>
        )
    }
}


export default Tabss